<style lang="scss" scoped>
* {
    font-size: 0.9rem;
}
.login {
    width: 100vw;
    height: 100vh;
    background: url("../../static/images/login/login_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}
.scroll-Y {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.top_logo {
    width: 100%;
    text-align: center;
    overflow: hidden;
    .top_img1 {
        image {
            width: 6rem;
        }
    }
    .top_img2 {
        image {
            width: 8rem;
        }
    }
    .top_img3 {
        image {
            width: 12rem;
        }
    }
}
.section_form {
    width: 100%;
    padding: 0 2rem;
    margin-top: 5rem;
    margin-bottom: 3rem;
    .u-form {
        .u-form-item {
            background-color: #fff;
            border: none;
            border-radius: 2rem;
            padding: 0.5rem 1.5rem;
            margin-bottom: 0.5rem;
        }
        ::v-deep .uni-input-wrapper {
            text-align: center;
        }
    }
    .button {
        background: linear-gradient(90deg, #fa9553 0%, #fa7563 100%);
        color: #fff;
        margin-top: 2rem;
        border-radius: 2rem;
    }
}
.footer_text {
    margin-bottom: 5rem;
    width: 100%;
    text-align: center;
    .checkbox_style {
        display: flex;
        justify-content: center;
        align-items: center;
        ::v-deep .u-checkbox__label {
            margin-right: 0;
        }
    }
    .text_ {
        font-size: 0.9rem;
        .mainColor {
            font-size: 0.9rem;
            color: #fa8c52;
        }
    }
    .footer_btn {
        margin-top: 2rem;
        display: flex;
        justify-content: center;
        text {
            margin: 0 1rem;
        }
    }
}
</style>

<template>
    <view class="login">
        <scroll-view scroll-y="true" class="scroll-Y">
            <view class="top_logo">
                <view class="top_img1">
                    <image src="../../static/images/login/top_img1.png" mode="widthFix" />
                </view>
                <view class="top_img2">
                    <image src="../../static/images/login/top_img2.png" mode="widthFix" />
                </view>
                <view class="top_img3">
                    <image src="../../static/images/login/top_img3.png" mode="widthFix" />
                </view>
            </view>
            <view class="section_form">
                <u-form :model="formData" ref="uForm">
                    <u-form-item label right-icon="account-fill">
                        <u-input maxlength="11" v-model="formData.account" placeholder="请输入账号" />
                    </u-form-item>
                    <u-form-item label>
                        <u-input v-model="formData.password" placeholder="请输入密码" type="password" :border-bottom="false" />
                    </u-form-item>
                </u-form>
                <u-button class="button" round :ripple="true" :hair-line="false" ripple-bg-color="#fa8c76" @click="handelLogin">登录</u-button>
            </view>
            <view class="footer_text">
                <view class="checkbox_style">
                    <u-checkbox v-model="isCheckAgreement"></u-checkbox>
                    <view class="text_">
                        我已阅读并同意
                        <span class="mainColor" @click="goagreement(1)">《服务协议》</span>
                        <span class="mainColor" @click="goagreement(2)">《隐私政策》</span>
                    </view>
                </view>
                <view class="footer_btn">
                    <text @click="goForgotPassword">忘记密码</text>
                    <text @click="goregister">邀请码注册</text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { md5 } from "@/utils/md5";
import { useUserStore } from "@/stores/user";
import { login } from "@/api/account";
import { getUserInfo } from "@/api/user";
const userStore = useUserStore();
const isCheckAgreement = ref(false);
const formData = reactive<{
    account: string;
    password: string;
}>({
    account: "18559102371",
    password: "123456",
    // account: "",
    // password: "",
});
const state = reactive<{}>({});
onLoad(() => {});
onShow(() => {
    if (uni.getStorageSync("app_token"))
        uni.reLaunch({ url: "/pages/index/index" });
});
// 跳转忘记密码
const goForgotPassword = () => {
    uni.navigateTo({ url: "/pages/ForgotPassword/ForgotPassword" });
};
// 跳转协议
const goagreement = (type) => {
    uni.navigateTo({ url: "/pages/agreement/agreement?type=" + type });
};
// 跳转注册
const goregister = () => {
    uni.navigateTo({ url: "/pages/register/register" });
};
// 登录
const handelLogin = async () => {
    if (!formData.account) return uni.$u.toast("请输入账号");
    let reg = /^1[3456789]\d{9}$/;
    if (!reg.test(formData.account)) return uni.$u.toast("请输入正确的手机号");
    if (!formData.password) return uni.$u.toast("请输入密码");
    if (!isCheckAgreement.value)
        return uni.$u.toast(
            "请勾选已阅读并同意《用户注册协议》和《用户隐私协议》"
        );
    try {
        uni.showToast({ title: "登录中", icon: "loading" });
        userStore.userInfo = await login({
            terminal: 3,
            account: formData.account,
            password: md5(formData.password),
            app_id: 1,
            scene: 1,
        });
        userStore.login(userStore.userInfo.token);
        const user_info = await getUserInfo();
        uni.setStorageSync("user_info", user_info);
        uni.reLaunch({ url: "/pages/index/index" });
        uni.hideToast();
    } catch (error) {
        console.log(error);
        uni.hideToast();
    }
};
</script>
